<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品管理</title>
<link rel="stylesheet" href="<%=path %>/resource/iKindEditor/editor/plugins/code/prettify.css" />
<link rel="stylesheet" href="<%=path %>/resource/iKindEditor/editor/themes/default/default.css" />
<script charset="utf-8" type="text/javascript" src="<%=path %>/resource/js/jquery/jquery-1.8.2.js"></script>
<script charset="utf-8" type="text/javascript" src="<%=path %>/resource/js/jquery/jquery.form.js"></script>
<script charset="utf-8" src="<%=path %>/resource/iKindEditor/editor/kindeditor.js"></script>
<script charset="utf-8" src="<%=path %>/resource/iKindEditor/editor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=path %>/resource/iKindEditor/editor/plugins/code/prettify.js"></script>
<script charset="utf-8" type="text/javascript" src="<%=path %>/resource/js/constants.js"></script>
<script charset="utf-8" type="text/javascript" src="<%=path %>/resource/js/ajax_constants.js"></script>
<script charset="utf-8" type="text/javascript" src="<%=path %>/resource/js/honeycombtool.js"></script>
<script type="text/javascript">
var CLICKED_ITEM_NODE = {};// 收录已经装过(加载过)内容的节点的id
var articleEditor_inputEditor;

KindEditor.ready(function(K) {
	var editor = K.create('textarea[id="goodsPictures"]', {
		uploadJson : '/uploads/upload_json.jsp',
		allowFileManager : true,

		resizeType : 0,
		width: 253,
		items : ['image']
	});
	prettyPrint();
	articleEditor_inputEditor = editor;
});
$(function() {
	loadFirstGoodsData();
	$(".menu >div").bind({
		'mouseover': function() {$(this).css("background", "#AED4F5");},
		'mouseout': function() {$(this).css("background", "#CCCCCC");}
	});
	$("#addGoodsItem").bind({
		'click': function() {
			$("#addGoodsBox").fadeIn();
		}
	});
	$("#closeAddGoodsBox").bind({
		'mouseover': function() {$(this).css("background", "#FFFFFF");},
		'mouseout': function() {$(this).css("background", "#EDEDED");},
		'click': function() {
			$("#addGoodsBox").fadeOut();
		}
	});
	$("#goodsSummaryPic").change(picSubmit);
	$("#submitAddGoods").click(doAddGoods);
	$("#gotoTop").click(gotoTop);
	$("#gotoBottom").click(gotoBottom);
	var menuItem = $("#types").find("ul > li");
	menuItem.each(function(index) {
		$(this).click(function() {
			menuItem.removeClass("active");
			$(this).addClass("active");
			var selectId = jQuery.trim($(this).attr("id"));
			changeGoodsItem(selectId);
		});
	});
});

function gotoTop() {
	window.scrollTo(0, 0);
}

function gotoBottom() {
	window.scrollTo(0, $(document).height());
}

function picSubmit() {
    $('#picForm').ajaxSubmit({
        dataType:  'json',
        url : '<%=getServletContext().getInitParameter("uploaderURL")%>',
        type: 'post',
        success:function(res){
			if(res.error == 0) {
				$("#goodsPicBox").html('<img style="max-height: 60px; max-width: 60px;" src="'+res.url+'" />');
			} else {
				alert("系统保存文件错误！错误信息：" + res.message);
			}
        }
    });

}

function doAddGoods() {
	var goodsName = $("#goodsName").val();
	var goodsPrice = $("#goodsPrice").val();
	var goodsUseNum = $("#goodsUseNum").val();
	var goodsPromise = $("#goodsPromise").val();
	var goodsType = $("#goodsType").val();
	var goodsDetailsUrl = $("#goodsDetailsUrl").val();
	var goodsPic = $("#goodsPicBox").find("img").attr("src");
	var goodsPics = articleEditor_inputEditor.html();
	goodsPics = jQuery.trim(goodsPics).length == 0 ? goodsPic : goodsPics; 
	if (!CHECK.isEmpty(goodsName) && isPrice(goodsPrice) && CHECK.isNumber(goodsUseNum) && !CHECK.isEmpty(goodsPromise) && CHECK.isPic(goodsPic) && !CHECK.isEmpty(goodsDetailsUrl)) {
		$("#addGoodsBox").fadeOut();
		$.ajax({
			url: WEBROOT + "/goods/admin/addGoods",
			type: "post",
			dataType: "json",
			data: {
				"goodsName": goodsName,
				"goodsPicUrl": goodsPic,
				"goodsPrice": goodsPrice,
				"goodsUseNum": goodsUseNum,
				"goodsSummaryPicUrls": goodsPics,
				"goodsDetailsUrl": goodsDetailsUrl,
				"goodsType": goodsType,
				"goodsPromise": goodsPromise
			},
			success: function(res) {
				if (res.result == AjaxMsgConstants.SUCCESS) {
					CLICKED_ITEM_NODE = {};
					alert("添加成功");
					//window.location.reload();// 考虑用其他形式改进
				} else {
					$("#addGoodsBox").show();
					alert("出错了, message:"+res.message);
				}
			}
		});
	} else {
		alert("请先完善数据");
	}
}

function isPrice(str) {
	if (isEmpty(str))
		return false;
	
	var regex = /^[0-9]{1,3}(\.[0-9]{1,2}){0,1}$/;
	if (regex.test(str)) {
		return true;
	}
	
	return false;
}

/**----------------------------------关于商品列表的内容--------------------------------------**/
 
function loadGoodsItemEvent() {
	$(".item-image").bind({
		'mouseover': showDeleteImg
	});
	$(".select-shadow").find("div").find("img").click(deleteGoodsItem);
}

function showDeleteImg() {
	var $this = $(this);
	$this.unbind();
	var showNode = $(this).parent('.item').find(".select-shadow");
	showNode.css("display", "block");
	showNode.bind({
		'mouseout': function() {
			$(this).unbind();
			$(this).css("display", "none");
			$this.mouseover(showDeleteImg);
		}
	});
}

function deleteGoodsItem() {
	var gi = jQuery.trim($(this).parent("div").find("._gi").val());
	if (!isEmpty(gi)) {
		var $this = $(this);
		$this.unbind('click');
		$this.parent("div").parent(".select-shadow").unbind();
		$this.parent("div").parent(".select-shadow").parent(".item").find(".item-image").unbind();
		
		$.ajax({
			url: WEBROOT + "/goods/admin/ajaxDeleteGoods",
			type: "post",
			dataType: "json",
			data: {
				"gi": gi
			},
			success: function(res) {
				if (res.result == AjaxMsgConstants.SUCCESS) {
					$this.parent("div").parent(".select-shadow").css('opacity', 1);
					$this.parent('div').find('input').remove();
					$this.parent('div').find('.alert_message_text').css("color", "red");
					$this.parent('div').find('.alert_message_text').html("已经删除");
				} else {
					$this.click(deleteGoodsItem);
					alert("出错了, message:"+res.message);
				}
			}
		});
	}
}

function loadFirstGoodsData() {
	loadGoodsItem("MEAT_DIET","meatContentBox");
	CLICKED_ITEM_NODE["meatContentBox"] = "clicked";
}
function loadGoodsItem(type,id){
	$.ajax({
		url: '<%=request.getContextPath() %>/goods/getGoods',
		data: {
			'goodsType' : type
		},
		type: 'post',
		dataType: 'json',
		success: function(res) {
			if(res.result == 0){
				CLICKED_ITEM_NODE[id] = "clicked";
				var contentNode = $("#"+id);
				var goodsList = res.goodsList;
				var goodsListLength = goodsList.length;
				if (goodsListLength == 0) {
					contentNode.html("<div class=\"alert_message_box\">目前还没有该系列菜品</div>");
				} else {
					createGoodsItemNodesToPage(goodsList, contentNode);
				}
			}
		}
	});
}
function changeGoodsItem(selectId) {
	window.setTimeout(function(){
		var selectType = "MEAT_DIET";
		var contentBoxId = "meatContentBox";
		if (selectId == "vegetableItem") {
			selectType = "VEGETABLE";
			contentBoxId = "vegetableContentBox";
		}
		if (selectId == "soupItem") {
			selectType = "SOUP";
			contentBoxId = "soupContentBox";
		}
		if (selectId == "specialityItem") {
			selectType = "SPECIALITY";
			contentBoxId = "specialityContentBox";
		}
		$("#goodsContentBox").find(".goodsItemContentBox").css("display", "none");
		$("#"+contentBoxId).css("display", "block");
		if (CLICKED_ITEM_NODE[contentBoxId] && CLICKED_ITEM_NODE[contentBoxId] == "clicked") {
			
		} else {
			$("#"+contentBoxId).html($("#bigLoadingImg").html());
			loadGoodsItem(selectType, contentBoxId);
		}
	}, 50);
}
function createGoodsItemNodesToPage(goodsList, contentNode) {
	contentNode.html("");
	for(var i = 0; i < goodsList.length; i++){
		var goods = goodsList[i];

		var htmlStr = '<div class="item" id="'+goods.goodsId+'">'+
						'<div class="item-title">'+goods.goodsName+'</div>'+
						'<div class="item-image"><img src="'+goods.goodsPicUrl+'" style="width: 100%; height: 110px; margin-top: 0px;" /></div>'+
						'<div class="single-item-info">'+
							'<div class="item-price"><span><img src="'+WEBROOT+'/resource/images/androidOrder/androidOrder2.png" style="width: 10px;height: 12px;" /></span><span>'+goods.goodsPrice+'</span></div>'+
							'<div class="item-amount"><span><img src="'+WEBROOT+'/resource/images/androidOrder/androidOrder3.png" style="width: 15px;height: 14px;" /></span><span>'+goods.goodsUseNum+'人份</span></div>'+
							'<div class="item-detail"><a>详情</a> <img src="'+WEBROOT+'/resource/images/androidOrder/androidOrder.png" /></div>'+
						'</div>'+
						'<div class="select-shadow">'+
							'<div>'+
								'<img src="'+WEBROOT+'/resource/images/androidOrder/deleteGoods.png"/>'+
								'<input type="hidden" class="_gi" value="'+goods.goodsId+'" />'+
								'<div class="alert_message_text">点击图片删除菜品</div>'+
							'</div>'+
						'</div>'+
					'</div>';

		contentNode.append(htmlStr);
	}
	loadGoodsItemEvent();
}
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", Arial;
font-size: 12px;
color: #333333;
}
.add_goods {
display: none;
position: fixed;
z-index: 201311;
width: 460px;
height: 500px;
bottom: 2px;
right: 200px;
background: #AED4F5;
border: 3px solid #EDEDED;
overflow: auto;
}
.add_goods .label {
font-size: 14px;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.add_goods .pic {
height: 60px;
}
.add_goods dl dt{
display: inline;
float: left;
line-height: 30px;
padding-right: 16px;
text-align: right;
width: 100px;
}
/* .add_goods dl dd {
float: right;
} */

.add_goods dl dd input[type="text"] {
border-radius: 3px;
height: 14px;
line-height: 14px;
margin-right: 7px;
padding: 7px 10px;
width: 233px;
border: 1px solid #BDC7D8;
}

.add_goods dl dd input[type="file"] {
width: 173px;
}

.add_goods dl dd input[type="button"] {
margin-left: 80px;
width: 100px;
text-align: center;
height: 30px;
line-height: 30px;
}

.add_goods dl dd select {
border-radius: 3px;
margin-right: 7px;
padding: 7px 10px;
width: 100px;
border: 1px solid #BDC7D8;
}

.clearfix:after {
clear: both;
content: " ";
display: block;
}
.left {
float: left;
}

.goods_item {

}

.menu {
position: fixed;
width: 60px;
height: 180px;
bottom: 10px;
right: 5px; 
}
.menu div {
height: 60px;
text-align: center;
line-height: 60px;
border-bottom: 1px solid green;
background-color: #CCCCCC;
cursor: pointer;
}

#closeAddGoodsBox {
position: absolute; 
right: 5px; 
top: 5px; 
width: 18px; 
height: 18px; 
text-align: center; 
line-height: 18px; 
font-size: 15px; 
color: red; 
background: #EDEDED; 
cursor: pointer;
}

	a {
		text-decoration: none;
		color: #000;
		outline: 0
	}
	a:active {
		outline: 0
	}
	.header{
		position: fixed;
		top: 0;
		z-index: 1055;
		width: 100%;
		height: 40px;
		padding: 5px 0;
		-moz-box-shadow: 3px 3px 4px #c4c4c4;
		-webkit-box-shadow: 2px 2px 2px #c4c4c4;
		box-shadow: 2px 3px 2px #c4c4c4;
		background-image: -moz-linear-gradient(top, #fff, #e3e3e3);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff),
			color-stop(1, #e3e3e3) );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',
			endColorstr='#E3E3E3', GradientType='0' )
	}
	.types{
		width: 95%;
		height: 36px;
		margin: 0 auto;
		color: #16a085;
		border: 2px solid #d3d3d3;
		border-radius: 5px;
		line-height: 2;
		text-align: center;
		background-image: -moz-linear-gradient(top, #e8e8e8, #ececec);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8),
			color-stop(1, #ececec) );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8E8E8',
			endColorstr='#FFFFFF', GradientType='0' )
	}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,select,option,textarea,p,th,td {
		-webkit-touch-callout: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
	}
	.types ul {
		list-style: none;
		padding: 0;
		margin: 1px auto
	}
	.types ul li {
		display: inline-block;
		width: 21%;
		cursor: pointer;
		font-size: 14px;
	}
	.types ul li.active {
		color: white;
		border-radius: 4px;
		border: 1px solid #23c30e;
		background-image: -moz-linear-gradient(top, #1fcf05, #1ab106);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #62c462),
			color-stop(1, #51a351) );
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1fcf05',
			endColorstr='#1ab106', GradientType='0' )
	}
	.goodsItemContentBox {
		width: 100%;height: auto;margin-top: 60px;overflow: hidden;margin-bottom: 60px;
	}
	.alert_message_box {
		width: 100%; height: 110px; text-align: center; margin-top: 50px; color: #23C30E; font-size: 2em;
	}
	
	.alert_message_box img {
		width: 110px; height: 110px;
	}
	.item{
		float: left;
		position: relative;
		display: inline-block;
		margin: 10px;
		width: 160px;
		border-radius:3px;
		-webkit-box-shadow: 1px 1px 6px #888;
		box-shadow: 1px 1px 6px #888;
		background-color: #fff;
	}
	
	.item-title{
		overflow:hidden;
		float: left;
		padding: 5px 10px;
		text-align: left;
		line-height: 1.5;
		font-size: 14px;
		white-space: nowrap;
	}
	
	.item-image{
		margin-top: 31px;
		width: 100%;
		height: 110px;
		text-align: center;
		cursor: pointer;
	}
	
	.single-item-info{
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	
	.item-price{
		display:inline-block;
		float: left;
		line-height: 1.7;
		font-size: 14px;
		padding:5px	10px;
	}
	
	.item-amount{
		display:inline-block;
		float: right;
		line-height: 1.7;
		font-size: 14px;
		padding:5px	10px;
	}
	
	.item-detail{
		display:inline-block;
		width: 95%;
		margin-left: 2.5%;
		padding: 0;
		border-top: 1px solid #e3e3e3;
		color: green;
		font-size: 15px;
		line-height: 1.7;
		text-align: left;
		cursor: pointer;
	}
	.select-shadow{
		display: none;
		position: absolute;
		z-index: 0;
		height: 70px;
		width: 100%;
		top: 31px;
		padding-top: 20px;
		padding-bottom: 20px;
		background: rgba(0,0,0,0.3);
		text-align: center;
		color: orange;
		font-size: 13px;
		cursor: pointer;
	}
</style>
</head>
<body>
	<div class="menu">
		<div id="addGoodsItem">添加商品</div>
		<div id="gotoTop">顶部</div>
		<div id="gotoBottom" style="border-bottom: none;">底部</div>
	</div>
	<!-- 添加商品 -->
	<div class="add_goods" id="addGoodsBox">
		<div id="closeAddGoodsBox">X</div>
		<div class="label">添加商品(所有都需要填)</div>
		<form action="<%=getServletContext().getInitParameter("uploaderURL")%>" method="post" id="picForm" enctype="multipart/form-data" target="uplaodResult">
		<dl class="clearfix pic">
			<dt>
				<label for="goodsSummaryPic">商品概略图</label>
			</dt>
			<dd class="clearfix">
				<input type="file" name="file" class="left" id="goodsSummaryPic">
				<span id="goodsPicBox">
					
				</span>
				<span>
				</span>
			</dd>
		</dl>
		</form>
		<iframe name="uplaodResult" style="display:none;">
		</iframe>
		<dl class="clearfix">
			<dt>
				<label for="goodsPoint">商平详情图</label>
			</dt>
			<dd class="clearfix">
				<textarea id="goodsPictures" style="display: bolck;width:600px; height:200px;"></textarea>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsName">商品名</label>
			</dt>
			<dd class="clearfix">
				<input type="text" class="left" id="goodsName">
				<span></span>
				<span></span>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsPrice">商品价格</label>
			</dt>
			<dd class="clearfix">
				<input type="text" class="left" id="goodsPrice">
				<span></span>
				<span></span>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsUseNum">适用人数</label>
			</dt>
			<dd class="clearfix">
				<input type="text" class="left" id="goodsUseNum">
				<span></span>
				<span></span>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsPromise">商家承诺</label>
			</dt>
			<dd class="clearfix">
				<input type="text" class="left" id="goodsPromise">
				<span></span>
				<span></span>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsType">商品类型</label>
			</dt>
			<dd class="clearfix">
				<select id="goodsType">
					<option value="MEAT_DIET">荤菜
					<option value="VEGETABLE">素菜
					<option value="SOUP">汤
					<option value="SPECIALITY">土特团
				</select>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
				<label for="goodsDetailsUrl">商品详情地址</label>
			</dt>
			<dd class="clearfix">
				<input type="text" class="left" id="goodsDetailsUrl" value="暂时不用填">
				<span></span>
				<span></span>
			</dd>
		</dl>
		<dl class="clearfix">
			<dt>
			</dt>
			<dd class="clearfix">
				<input type="button" value="确认添加" class="left" id="submitAddGoods">
			</dd>
		</dl>
	</div>
	<!-- 商品列表 -->
	<div class="goods_item">
		<div class="header" id="home-header">
			<div class="types" id="types">
				<ul>
					<li id="vegetableItem">素菜</li>
					<li id="meatItem" class="active">荤菜</li>
					<li id="soupItem">汤</li>
					<li id="specialityItem">土特团</li>
				</ul>
			</div>
		</div>
		
		<div id="goodsContentBox">
			<div id="meatContentBox" class="goodsItemContentBox">
				<div class="alert_message_box">
					<img src="<%=request.getContextPath() %>/resource/images/pages/loading.gif" alt="loading..." />
				</div>
			</div>
			<div id="vegetableContentBox" class="goodsItemContentBox"></div>
			<div id="soupContentBox" class="goodsItemContentBox"></div>
			<div id="specialityContentBox" class="goodsItemContentBox"></div>
		</div>
	</div>
	
	<div id="resource" style="display: none; position: absolute; z-index: -1;">
		<div id="bigLoadingImg" style="display: none;">
			<div class="alert_message_box">
				<img src="<%=request.getContextPath() %>/resource/images/androidOrder/lazyLoad.gif" alt="loading..." />
			</div>
		</div>
	</div>
	
</body>
</html>